<template>
  <!-- 原有模板内容不变 -->
  <div class="approval-result">
    <!-- 标题：带图标与红色序号 -->
    <div class="page-title">
      审批结果
    </div>

    <!-- 中间提示区域 -->
    <div class="tip-container">
      <img class="png" src="@/assets/images/!.png" alt="">
      <h3 class="tip-title">审批中</h3>
      <p class="tip-desc">稍等，退住账单正在审批中，若该申请单长时间未处理，请联系（审批角色）！</p>
    </div>

    <!-- 操作记录卡片 -->
    <el-card v-if="users.appUser" class="record-card" shadow="hover">
      <div slot="header" class="card-header">操作记录</div>
      <ul class="record-list">
        <li  class="record-item">
          <div class="item-icon">
            <img  src="@/assets/images/avatar.jpg">
          </div>
          <div class="item-content">
            <div class="item-desc">发起申请-申请退住</div>
            <div class="item-status">{{users.checkUser.nickName}}（已发起）</div>
          </div>
          <div class="item-time"> {{formatDateStr(users.appTask.endTime)}}</div>
        </li>
        <li  class="record-item">
          <div class="item-icon">
            <img  src="@/assets/images/avatar.jpg">
          </div>
          <div class="item-content">
            <div class="item-desc">审批-申请审批</div>
            <div class="item-status">{{users.checkUser.nickName}}（审批中）</div>
          </div>
          <div class="item-time"></div>
        </li>

      </ul>
    </el-card>
  </div>
  <!-- 底部返回按钮 -->
  <div class="btn-area" style="text-align: center;">
    <el-button type="default" @click="goBack">返回</el-button>
  </div>
</template>

<script>
import {getActivityUser} from "@/api/check/checkout.js"
// 原有脚本内容不变
export default {
  name: "ApprovalResult",
  data() {
    return {
      recordList: [
        {
          icon: "@/assets/images/avatar.png",
          iconColor: "#909399",
          desc: "发起申请-申请退住",
          status: "顾延烨（已发起）",
          time: "2048-10-15 09:00:00",
        },
        {
          icon: "el-icon-message",
          iconColor: "#20a0ff",
          desc: "（角色）审批-申请审批",
          status: "盛明兰（审批中）",
          time: "",
        },
      ],
      users:{}
    };
  },
  methods: {
    goBack() {
      this.$router.push("/checkinManagement/checkout/checkout");
    },
    formatDateStr(dateStr) {
      // 先判断输入是否为有效格式（含"T"和"."）
      if (!dateStr || typeof dateStr !== 'string' || !dateStr.includes('T') || !dateStr.includes('.')) {
        console.warn('输入不是有效的日期格式');
        return '';
      }
    }
  },
  mounted() {
    getActivityUser(this.id).then(response => {
      this.users = response.data
    })
  },
  props: {
    id: {
      type: [String, Number], // 根据你的需求，也可以是 Object 等类型
      required: true          // 是否必填
    }
  },
};
</script>

<style scoped>
/* 原有样式不变，新增以下连线样式 */

/* 记录列表容器：作为连线定位基准 */
.record-list {
  position: relative;
  padding-left: 20px; /* 给左侧连线预留空间 */
}

/* 垂直主线：连接所有记录项（除第一个） */
.record-item:not(:first-child)::before {
  content: '';
  position: absolute;
  left: 20px; /* 与图标中心对齐（图标宽40px，中心在20px处） */
  top: 54px;
  height: 24px;
  width: 2px;
  background-color: #97a8be; /* 浅灰色线条 */
}




/* 原有样式保持不变 */
.approval-result {
  text-align: center;
  background-color: #fafafa;
  border-left: 1px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
  padding: 20px 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}
.png {
  margin-top: 80px;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
}
.page-title {
  text-align: left;
  margin-bottom: 32px;
  font-size: 16px;
  font-weight: 500;
}
.title-badge {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  background-color: #ff4d4f;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  margin-right: 8px;
}
.tip-container {
  margin-bottom: 24px;
}
.tip-title {
  margin: 16px 0;
  font-size: 20px;
  color: #303133;
}
.tip-desc {
  color: #606266;
  line-height: 1.5;
}
.record-card {
  width: 480px;
  margin: 0 auto 100px;
  text-align: left;
  background-color: #d3dce6;
  padding-bottom: 50px;
}
.card-header {
  font-weight: bold;
}
.record-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.record-item {
  display: flex;
  align-items: flex-start;
  padding: 12px 0;
}

.item-icon img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
}
.item-content {
  flex: 1;
}
.item-desc {
  font-weight: 500;
  margin-bottom: 4px;
}
.item-status {
  color: #909399;
  font-size: 12px;
}
.item-time {
  color: #909399;
  font-size: 12px;
}
.btn-area {
  margin-top: 20px;
}
</style>